<template>
  <div id="player-modal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <player player-id="modal-player-div"
                  ref="player"></player>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Player from "./player";
import {ref} from "vue";

export default {
  exposed: ['playUrl', 'playVod'],
  name: 'modal-player',
  components: {Player},

  setup() {
    const player = ref();

    const playUrl = (url) => {
     player.value.playUrl(url);
    }


    const playVod = (vod) => {
      player.value.playVod(vod);
      $("#player-modal").modal("show");
    }

    return {
      player,
      playUrl,
      playVod
    }
  }

}
</script>

<style scoped>
#player-modal .modal-body {
  padding: 0;
}

</style>